<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">User Interface</a>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Confirmation Dialog
                </h2>
            </div>
        </div>
    </div>

    <!-- Main -->
    <div class="flex-auto p-6 sm:p-10">

        <div class="max-w-3xl">
            <div class="max-w-3xl prose prose-sm">
                <p>
                    One of the repetitive and tedious jobs in Angular is to create confirmation dialogs. Since dialogs require their own components
                    you have to either create a separate component every time you need a confirmation dialog or you have to create your own
                    confirmation dialog system that can be configured.
                </p>
                <p>
                    In order for you to save time while developing with Fuse, we have created a simple yet powerful <code>FuseConfirmationService</code>
                    to create customized confirmation dialogs on-the-fly.
                </p>
                <p>
                    Below you can configure and preview the confirmation dialog. You can use the generated configuration object within your code to have
                    the exact same dialog.
                </p>
                <p>
                    For more detailed information and API documentation, check the
                    <a [routerLink]="'/ui/fuse-components/services/confirmation'">documentation</a>
                    page.
                </p>
            </div>
            <div class="example-viewer">

                <div class="title">
                    <h6>Configure the dialog and preview it</h6>
                </div>

                <div class="flex flex-col p-8 pt-0">

                    <form
                        [formGroup]="configForm"
                        class="flex flex-col items-start">

                        <!-- Title -->
                        <mat-form-field class="fuse-mat-no-subscript w-full">
                            <mat-label>Title</mat-label>
                            <input
                                matInput
                                [formControlName]="'title'">
                        </mat-form-field>

                        <!-- Message -->
                        <mat-form-field class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6">
                            <mat-label>Message</mat-label>
                            <textarea
                                matInput
                                [formControlName]="'message'">
                            </textarea>
                        </mat-form-field>

                        <!-- Divider -->
                        <div class="w-full mt-8 mb-7 border-b"></div>

                        <!-- Icon -->
                        <div
                            class="flex flex-col w-full"
                            [formGroupName]="'icon'">
                            <mat-checkbox
                                [color]="'primary'"
                                [formControlName]="'show'">
                                Show Icon
                            </mat-checkbox>
                            <div class="flex items-center w-full mt-6">
                                <!-- Icon name -->
                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
                                    <mat-label>Icon name</mat-label>
                                    <input
                                        matInput
                                        [formControlName]="'name'">
                                </mat-form-field>

                                <!-- Icon color -->
                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
                                    <mat-label>Icon color</mat-label>
                                    <mat-select [formControlName]="'color'">
                                        <ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
                                            <mat-option [value]="color">{{color | titlecase}}</mat-option>
                                        </ng-container>
                                    </mat-select>
                                </mat-form-field>
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="w-full mt-8 mb-7 border-b"></div>

                        <!-- Actions -->
                        <div
                            class="w-full"
                            [formGroupName]="'actions'">
                            <!-- Confirm -->
                            <div
                                class="flex flex-col w-full"
                                [formGroupName]="'confirm'">
                                <mat-checkbox
                                    class="mt-2"
                                    [color]="'primary'"
                                    [formControlName]="'show'">
                                    Show Confirm button
                                </mat-checkbox>
                                <div class="flex items-center w-full mt-4">
                                    <!-- Confirm label -->
                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
                                        <mat-label>Confirm button label</mat-label>
                                        <input
                                            matInput
                                            [formControlName]="'label'">
                                    </mat-form-field>

                                    <!-- Confirm color -->
                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
                                        <mat-label>Confirm button color</mat-label>
                                        <mat-select [formControlName]="'color'">
                                            <ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
                                                <mat-option [value]="color">{{color | titlecase}}</mat-option>
                                            </ng-container>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>

                            <!-- Cancel -->
                            <div
                                class="flex flex-col w-full mt-6"
                                [formGroupName]="'cancel'">
                                <mat-checkbox
                                    class="mt-2"
                                    [color]="'primary'"
                                    [formControlName]="'show'">
                                    Show Cancel button
                                </mat-checkbox>
                                <div class="flex items-center w-full mt-4">
                                    <!-- Cancel label -->
                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
                                        <mat-label>Cancel button label</mat-label>
                                        <input
                                            matInput
                                            [formControlName]="'label'">
                                    </mat-form-field>
                                </div>
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="w-full mt-8 mb-7 border-b"></div>

                        <!-- Dismissible -->
                        <mat-checkbox
                            [color]="'primary'"
                            [formControlName]="'dismissible'">
                            Dismissible
                        </mat-checkbox>
                    </form>

                    <div class="mt-12">
                        <button
                            mat-flat-button
                            [color]="'primary'"
                            (click)="openConfirmationDialog()">
                            Open Confirmation Dialog
                        </button>
                    </div>
                </div>
            </div>

            <!-- Config as json -->
            <div class="dark w-full mt-8 p-4 rounded-2xl overflow-hidden">
                <textarea
                    fuse-highlight
                    [code]="configForm.value | json"
                    [lang]="'json'"></textarea>
            </div>
        </div>
    </div>
</div>
